<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homepage</title>
<link rel='stylesheet' href='resources/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' href='resources/css/grid.css' type='text/css' media='all' />
<!-- <link rel="stylesheet" href="resources/css/basic.css" type="text/css" /> -->
<link rel="stylesheet" href="resources/css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="resources/compiled/js/blocksit.js"></script>
<script type="text/javascript" src="resources/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="resources/js/jquery.opacityrollover.js"></script>
<script>
	$(document).ready(function() {
		//vendor script
		$('#header').css({
			'top' : -50
		}).delay(1000).animate({
			'top' : 0
		}, 800);

		$('#footer').css({
			'bottom' : -15
		}).delay(1000).animate({
			'bottom' : 0
		}, 800);

		$.getJSON('services/manager/pictures', function(data) {
			$.each(data.galeries, function(key, val) {
				alert(val.url);
				//$("#thumbs > ul > li")
				//	.append("<li><a class=\"thumb\" name=\"leaf\" href=\"#\" title=\"Title #0\"><img src=\"" +
				//			val.url + "\" alt=\"Title #0\" /></a><div class=\"caption\"><div class=\"download\"><a href=\"http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg\">Download Original</a></div><div class=\"image-title\">Title #0</div><div class=\"image-desc\">Description</div></div></li>");
			});
		});
		
		$('#search').keypress(function(event){
			var keycode = (event.keyCode ? event.keyCode : event.which);
			var id = document.getElementById("searching").value;
			if(keycode == '13'){
				$.getJSON('services/manager/friendProfile/'+id, function(detail) {
					if (detail.emailAddress === null) {
						alert("User tidak ditemukan.");
					} else {
						alert(detail.emailAddress);
					}
				});
			}
		});
		
		//blocksit define
		$(window).load(function() {
			$('#container').BlocksIt({
				numOfCol : 4,
				offsetX : 8,
				offsetY : 8
			});
		});

		//window resize
		var currentWidth = 1100;
		$(window).resize(function() {
			var winWidth = $(window).width();
			var conWidth;
			if (winWidth < 660) {
				conWidth = 440;
				col = 2
			} else if (winWidth < 880) {
				conWidth = 660;
				col = 3
			} else if (winWidth < 1100) {
				conWidth = 880;
				col = 4;
			} else {
				conWidth = 1100;
				col = 5;
			}

			if (conWidth != currentWidth) {
				currentWidth = conWidth;
				$('#container').width(conWidth);
				$('#container').BlocksIt({
					numOfCol : col,
					offsetX : 8,
					offsetY : 8
				});
			}
		});
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '100px', 'float' : 'left'});
		$('div.content').css('display', 'block');

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		var gallery = $('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 15,
			preloadAhead:              10,
			enableTopPager:            true,
			enableBottomPager:         true,
			maxPagesToShow:            7,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 false,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});
	});
</script>
</head>
<body>

	<!-- Content -->
	<section id="wrapper">
		<!-- Header -->

		<header id="header">
			<div id="logo">
				<h4>Babytivities</h4>
			</div>
			<div id="backlinks">
			<div id="search">
				<input type="text" id="searching" name="searching" placeholder="search peoples here"/>
			</div>
				<ul>
					<li><a href="home.html">Home</a></li>
					<li><a href="scrap.html">Scrap</a></li>
					<li><a href="message.html">Message</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="profile.html">Profile</a></li>
				</ul>
			</div>
		</header>
		<div class="clearfix">&nbsp;</div>

		<div id="main_wrap" class="container_12">
			<div id="gallery" class="content">
				<div id="controls" class="controls"></div>
				<div class="slideshow-container">
					<div id="loading" class="loader"></div>
					<div id="slideshow" class="slideshow"></div>
				</div>
				<div id="caption" class="caption-container"></div>
			</div>
			<div id="thumbs" class="navigation">
				<ul class="thumbs noscript">
					<li>
						<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
							<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
						</a>
						<div class="caption">
							<div class="download">
								<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
							</div>
							<div class="image-title">Title #0</div>
							<div class="image-desc">Description</div>
						</div>
					</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--  
			<div id="container" class="grid_12">
				
			</div>
			<div class="grid_4 ">
				<div id="wrap_sidebar">
					<h3>Tips untuk mama</h3>
					<ul>
						<li>
							<p><strong>1. Perut ke perut</strong></p>
							<p><img src="resources/image/tummy_to_tummy.jpg" /></p>
							<p>Berbaringlah di lantai atau di tempat tidur, datar atau di atas bantal. Tempatkan bayi anda di dada atau di perut, sehingga Anda bertatap muka dengan bayi anda. Selalu pegang yang kuat untuk keselamatan.</p>
						</li>
						<li>
							<p><strong>2.kontak mata dan senyum</strong></p>
							<p><img src="resources/image/eye_level_smile.jpg" /></p>
							<p>Sejajarkan tubuh anda dengan bayi Anda untuk terjadi kontak mata. Gulung dan tempatkan selimut di bawah dada dan diatas lengan untuk dukungan tambahan.</p>
						</li>
						<li>
							<p><strong>3. Pangkuan yg nyaman</strong></p>
							<p><img src="resources/image/lap_soothe.jpg" /></p>
							<p>Tempatkan bayi tertelungkup di pangkuan Anda untuk bersendawa atau menenangkan dia. Sebuah tangan di bagian bawah bayi Anda akan membantu menstabilkan dan menenangkan bayi anda.</p>
						</li>
						<li>
							<p><strong>4. Pegang bawah perut</strong></p>
							<p><img src="resources/image/tummy_down_carry.jpg" /></p>
							<p>Geser satu tangan di bawah perut dan di antara kaki ketika memegang bawah perut bayi. dekatkan bayi ke tubuh Anda</p>
						</li>
						<li>
							<p><strong>5. Saat untuk berperut</strong></p>
							<p><img src="resources/image/tummy_minute.jpg" /></p>
							<p>Tempatkan bayi pada perutnya untuk satu atau dua menit setiap kali Anda merubah posisi bayi anda. Mulai beberapa menit pada suatu waktu dan coba untuk melakukan itu sampai satu jam per hari dalam interval yang lebih pendek pada tiga bulan terakhir</p>
						</li>
					</ul>
				</div>
				<div id="wrap_sidebar">sidebar</div>
			</div>
			-->
		</div>

	</section>

	<!-- Footer -->
	<footer id="footer">
		<span>&copy; 2012 <a href="#">babytivities</a></span>
	</footer>

</body>
</html>